<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cofeee</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 引入awesome的图标css文件 -->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- 引用自定义的css -->
    <link rel="stylesheet" href="css/style.css">

    


</head>


<script>
    (function emojiCursor() {
        // 自定义的表情
        var possibleEmoji = ["+"];
        var width = window.innerWidth;
        var height = window.innerHeight;
        var cursor = { x: width / 0, y: width / 0 };
        var particles = [];

        function init() {
            bindEvents();
            loop();
        }

        // Bind events that are needed
        function bindEvents() {
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('touchmove', onTouchMove);
            document.addEventListener('touchstart', onTouchMove);

            window.addEventListener('resize', onWindowResize);
        }

        function onWindowResize(e) {
            width = window.innerWidth;
            height = window.innerHeight;
        }

        function onTouchMove(e) {
            if (e.touches.length > 0) {
                for (var i = 0; i < e.touches.length; i++) {
                    addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleEmoji[Math.floor(Math.random() * possibleEmoji.length)]);
                }
            }
        }

        function onMouseMove(e) {
            cursor.x = e.clientX;
            cursor.y = e.clientY;

            addParticle(cursor.x, cursor.y, possibleEmoji[Math.floor(Math.random() * possibleEmoji.length)]);
        }

        function addParticle(x, y, character) {
            var particle = new Particle();
            particle.init(x, y, character);
            particles.push(particle);
        }

        function updateParticles() {

            // Updated
            for (var i = 0; i < particles.length; i++) {
                particles[i].update();
            }

            // Remove dead particles
            for (var i = particles.length - 1; i >= 0; i--) {
                if (particles[i].lifeSpan < 0) {
                    particles[i].die();
                    particles.splice(i, 1);
                }
            }

        }

        function loop() {
            requestAnimationFrame(loop);
            updateParticles();
        }

        /**
         * Particles
         */

        function Particle() {

            this.lifeSpan = 100; //ms
            this.initialStyles = {
                "position": "fixed",
                "top": "0",
                "display": "block",
                "pointerEvents": "none",
                "z-index": "10000000",
                "fontSize": "16px",
                "will-change": "transform"
            };

            // Init, and set properties
            this.init = function (x, y, character) {

                this.velocity = {
                    x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                    y: 1
                };

                this.position = { x: x - 10, y: y - 20 };

                this.element = document.createElement('span');
                this.element.innerHTML = character;
                applyProperties(this.element, this.initialStyles);
                this.update();

                document.body.appendChild(this.element);
            };

            this.update = function () {
                this.position.x += this.velocity.x;
                this.position.y += this.velocity.y;
                this.lifeSpan--;

                this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
            }

            this.die = function () {
                this.element.parentNode.removeChild(this.element);
            }
        }

        /**
         * Utils
         */

        // Applies css `properties` to an element.
        function applyProperties(target, properties) {
            for (var key in properties) {
                target.style[key] = properties[key];
            }
        }

        init();
    })();
</script>




    <script>
        var stop, staticx;
        var img = new Image();
        img.src = "";

        function Sakura(x, y, s, r, fn) {
            this.x = x;
            this.y = y;
            this.s = s;
            this.r = r;
            this.fn = fn;
        }

        Sakura.prototype.draw = function(cxt) {
            cxt.save();
            var xc = 40 * this.s / 4;
            cxt.translate(this.x, this.y);
            cxt.rotate(this.r);
            cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
            cxt.restore();
        }

        Sakura.prototype.update = function() {
            this.x = this.fn.x(this.x, this.y);
            this.y = this.fn.y(this.y, this.y);
            this.r = this.fn.r(this.r);
            if(this.x > window.innerWidth ||
                this.x < 0 ||
                this.y > window.innerHeight ||
                this.y < 0
            ) {
                this.r = getRandom('fnr');
                if(Math.random() > 0.4) {
                    this.x = getRandom('x');
                    this.y = 0;
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                } else {
                    this.x = window.innerWidth;
                    this.y = getRandom('y');
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                }
            }
        }

        SakuraList = function() {
            this.list = [];
        }
        SakuraList.prototype.push = function(sakura) {
            this.list.push(sakura);
        }
        SakuraList.prototype.update = function() {
            for(var i = 0, len = this.list.length; i < len; i++) {
                this.list[i].update();
            }
        }
        SakuraList.prototype.draw = function(cxt) {
            for(var i = 0, len = this.list.length; i < len; i++) {
                this.list[i].draw(cxt);
            }
        }
        SakuraList.prototype.get = function(i) {
            return this.list[i];
        }
        SakuraList.prototype.size = function() {
            return this.list.length;
        }

        function getRandom(option) {
            var ret, random;
            switch(option) {
                case 'x':
                    ret = Math.random() * window.innerWidth;
                    break;
                case 'y':
                    ret = Math.random() * window.innerHeight;
                    break;
                case 's':
                    ret = Math.random();
                    break;
                case 'r':
                    ret = Math.random() * 6;
                    break;
                case 'fnx':
                    random = -0.5 + Math.random() * 1;
                    ret = function(x, y) {
                        return x + 0.5 * random - 1.7;
                    };
                    break;
                case 'fny':
                    random = 1.5 + Math.random() * 0.7
                    ret = function(x, y) {
                        return y + random;
                    };
                    break;
                case 'fnr':
                    random = Math.random() * 0.03;
                    ret = function(r) {
                        return r + random;
                    };
                    break;
            }
            return ret;
        }

        function startSakura() {

            requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame;
            var canvas = document.createElement('canvas'),
                cxt;
            staticx = true;
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
            canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
            canvas.setAttribute('id', 'canvas_sakura');
            document.getElementsByTagName('body')[0].appendChild(canvas);
            cxt = canvas.getContext('2d');
            var sakuraList = new SakuraList();
            for(var i = 0; i < 50; i++) {
                var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
                randomX = getRandom('x');
                randomY = getRandom('y');
                randomR = getRandom('r');
                randomS = getRandom('s');
                randomFnx = getRandom('fnx');
                randomFny = getRandom('fny');
                randomFnR = getRandom('fnr');
                sakura = new Sakura(randomX, randomY, randomS, randomR, {
                    x: randomFnx,
                    y: randomFny,
                    r: randomFnR
                });
                sakura.draw(cxt);
                sakuraList.push(sakura);
            }
            stop = requestAnimationFrame(function() {
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                sakuraList.update();
                sakuraList.draw(cxt);
                stop = requestAnimationFrame(arguments.callee);
            })
        }

        window.onresize = function() {
            var canvasSnow = document.getElementById('canvas_snow');
            canvasSnow.width = window.innerWidth;
            canvasSnow.height = window.innerHeight;
        }

        img.onload = function() {
            startSakura();
        }

        function stopp() {
            if(staticx) {
                var child = document.getElementById("canvas_sakura");
                child.parentNode.removeChild(child);
                window.cancelAnimationFrame(stop);
                staticx = false;
            } else {
                startSakura();
            }
        }
</script>
    <!-- 播放音频 -->

    <video src="media/bgm2.mp3 " autoplay hidden></video>

    <!-- 导航条 -->
    <!-- 添加logo和下拉菜单按钮 -->
    <nav class="navbar  navbar-fixed-top" id="nav">
        <div class="container">
            <div class="navbar-header">
                <!-- 登录小人 -->
                <div class="toolbar right">
                    <button type="button" class="navbar-toggle btnuser" data-toggle="modal" data-target="#myModal">
                        <i class="fa fa-user fa-1x"></i>
                    </button>

                    <!-- 下拉菜单 -->
                    <button type="button" class="navbar-toggle collapsed" id="navbtn" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <i class="fa fa-navicon fa-1x" id="navicon"></i>
                        <i class="fa fa-times fa-1x" id="navicon"></i>

                    </button>

                </div>

                <a class="navbar-brand logo" href="#">
                    <!-- 查询font-awesome修改logo图标 -->
                    <i class="fa fa-coffee fa-1x"></i>
                    <span>Cofee</span>
                </a>
            </div>

            <!-- 添加导航链接（删除无用html） -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav " id="navbar">
                    <!-- 修改导航链接内容 -->
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#menu">Menu</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#reviews">Reviews</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#post">Daliy Post</a></li>
                    <li><a href="#newsletter"> Newsletter</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown ">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false ">Dropdownl <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 焦点图模块(home) -->
    <section class="home" id="home">
        <div class="container">
            <div class="row">
                <!-- 巨幕 -->
                <div class="jumbotron">
                    <div class="col-md-6">
                        <div>
                            <h2>Coffee House</h2>
                            <h1>start your day with our coffee</h1>
                            <p><a class="btn btn-default btn-lg" href="#" role="button">get started</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 关于模块(about) -->
    <!-- 响应式图片 -->
    <section class="about" id="about">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 hidden-xs">
                    <img class="img-responsive" src="images/about-img-1.png" alt="">
                </div>
                <div class="col-sm-6">
                    <!-- 右边文本内容，采用h2标题 -->
                    <h2><small>Why choose us?</small></h2>
                    <h2>The Best salad Maker In The Town</h2>
                    <p class="">We insist on making the best salad with the freshest ingredients. Let's start a
                        healthy journey and keep fit. Our main products are salad, fitness meal, European bread, all
                        kinds of salad dressing, etc</p>
                    <p><a class="btn btn-default btn-lg" href="#" role="button">red mome</a></p>

                    <!-- 图标+文本模块结构（采用列嵌套） -->
                    <!-- 分栏 -->
                    <div class="row">
                        <div class="col-xs-4 col-sm-4 col-md-4 icon-box">
                            <div class="icons text-center">
                                <i class="fa fa-cutlery fa-3x"></i>
                                <p>Best salad</p>
                            </div>
                        </div>


                        <div class="col-xs-4 col-sm-4 col-md-4 icon-box">
                            <div class="icons text-center">
                                <i class="fa fa-bus fa-3x"></i>
                                <p>Best salad</p>
                            </div>
                        </div>


                        <div class="col-xs-4 col-sm-4 col-md-4 icon-box">
                            <div class="icons text-center">
                                <i class="fa fa-gift fa-3x"></i>
                                <p>Best salad</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 四、菜单模块(menu) -->
    <!-- 页头 -->
    <section class="menu" id="menu">
        <div class="container">
            <div class="page-header">
                <h1>Our Menu</h1>
            </div>
            <!-- 6个图片 -->
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbs text-center">
                        <a href="#" class="thumbnail">
                            <img class="img-responsive" src="images/menu-1.png" alt="...">
                            <h3>1.mixed salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbs text-center">
                        <a href="#" class="thumbnail">
                            <img class="img-responsive" src="images/menu-2.png" alt="...">
                            <h3>2.mixed salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </a>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4">
                    <div class="thumbs text-center">
                        <a href="#" class="thumbnail">
                            <img class="img-responsive" src="images/menu-3.png" alt="...">
                            <h3>3.mixed salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbs text-center">
                            <a href="#" class="thumbnail">
                                <img class="img-responsive" src="images/menu-4.png" alt="...">
                                <h3>4.mixed salad</h3>
                                <p>Il s'agit du texte de la description du produit, qui est édité en fonction du
                                    contenu.</p>
                                <button type="button" class="btn btn-default btn-lg">read more</button>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbs text-center">
                            <a href="#" class="thumbnail">
                                <img class="img-responsive" src="images/menu-5.png" alt="...">
                                <h3>5.mixed salad</h3>
                                <p>Il s'agit du texte de la description du produit, qui est édité en fonction du
                                    contenu.</p>
                                <button type="button" class="btn btn-default btn-lg">read more</button>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbs text-center">
                            <a href="#" class="thumbnail">
                                <img class="img-responsive" src="images/menu-6.png" alt="...">
                                <h3>6.mixed salad</h3>
                                <p>Il s'agit du texte de la description du produit, qui est édité en fonction du
                                    contenu.</p>
                                <button type="button" class="btn btn-default btn-lg">read more</button>
                            </a>
                        </div>
                    </div>
                </div>
    </section>

    <!-- 五、相册模块(gallery) -->
    <section class="gallery" id="gallery">
        <div class="container">
            <div class="page-header">
                <h1>Our Gallery</h1>
            </div>
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <a href="#" class="thumbnail">
                        <img class="img-responsive" src="images/g-img-1.jpg" alt="...">

                        <div class="content">
                            <h3>green salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#" class="thumbnail">
                        <img class="img-responsive" src="images/g-img-2.jpg" alt="...">

                        <div class="content">
                            <h3>green salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#" class="thumbnail">
                        <img class="img-responsive" src="images/g-img-3.jpg" alt="...">

                        <div class="content">
                            <h3>green salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#" class="thumbnail">
                        <img class="img-responsive" src="images/g-img-4.jpg" alt="...">

                        <div class="content">
                            <h3>green salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#" class="thumbnail">
                        <img class="img-responsive" src="images/g-img-5.jpg" alt="...">

                        <div class="content">
                            <h3>green salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="#" class="thumbnail">
                        <img class="img-responsive" src="images/g-img-6.jpg" alt="...">

                        <div class="content">
                            <h3>green salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                            <button type="button" class="btn btn-default btn-lg">read more</button>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- 六、反馈模块(reviews) -->
    <section class="reviews" id="reviews">
        <div class="container">
            <div class="page-header">
                <h1>Reviews</h1>
            </div>
            <div class="row">
                <div class=" col-md-4">
                    <div class="thumbs text-center">
                        <a href="#" class="thumbnail">
                            <img class="img-responsive" src="images/pic-1.png" alt="...">
                            <h3>1.mixed salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                        </a>
                    </div>
                </div>
                <div class=" col-md-4">
                    <div class="thumbs text-center">
                        <a href="#" class="thumbnail">
                            <img class="img-responsive" src="images/pic-2.png" alt="...">
                            <h3>2.mixed salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                        </a>
                    </div>
                </div>
                <div class=" col-md-4">
                    <div class="thumbs text-center">
                        <a href="#" class="thumbnail">
                            <img class="img-responsive" src="images/pic-3.png" alt="...">
                            <h3>3.mixed salad</h3>
                            <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 七、联系模块(contact) -->
    <section class="contact" id="contact">
        <div class="container">
            <div class="page-header">
                <h1>Contact</h1>
            </div>
            <!-- 1.联系信息部分 -->
            <div class="row info">
                <div class="col-md-4">
                    <div class="icons text-center">
                        <i class="fa fa-phone fa-3x"></i>
                        <h3>Phone</h3>
                        <p>+158-891-81185</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="icons text-center">
                        <i class="fa fa-envelope fa-3x"></i>
                        <h3>Email</h3>
                        <p>531141013@qq.com</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="icons text-center">
                        <i class="fa fa-map fa-3x"></i>
                        <h3>Address</h3>
                        <p>GuangDong-China-026</p>
                    </div>
                </div>
                <!-- 地图插件 -->
                <div class="row map">
                    <div class="col-md-6">
                        <!-- 加入地图的html -->
                        <iframe class="map" src="map.html" width="100%" height="100%" frameborder="0"
                            scrolling="no"></iframe>
                    </div>
                    <div class="col-md-6">
                        <h3 class="a">Get in Touch</h3>
                        <!-- 输入框组件 加form action里方便后台传输-->
                        <form action="" method="post">
                            <input class="form-control" type="text" placeholder="name" name="" id="">
                            <input class="form-control" type="email" placeholder="email" name="" id="">
                            <input class="form-control" type="text" placeholder="Phone" name="" id="">
                            <textarea class="form-control" name="" id="" cols="30" rows="6"></textarea>
                            <input class="btn btn-default btn-lg" type="submit" value="send message">
                        </form>
                    </div>
                </div>
            </div>
    </section>
    <!-- 八、文章模块(post) -->
    <section class="post" id="post">
        <div class="container">
            <div class="page-header">
                <h1>Daliy Post</h1>
            </div>
            <div class="col-md-4">
                <div class="thumbs text-center">
                    <a href="#" class="thumbnail">
                        <div class="imgbox"><img class="img-responsive" src="images/g-img-1.jpg" alt="..."></div>
                        <h3>Blog Title Goes Here.</h3>
                        <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.</p>
                        <button type="button" class="btn btn-default btn-lg">read more</button>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbs text-center">
                    <a href="#" class="thumbnail">
                        <div class="imgbox"><img class="img-responsive" src="images/g-img-2.jpg" alt="..."></div>
                        <h3>Blog Title Goes Here.</h3>
                        <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.</p>
                        <button type="button" class="btn btn-default btn-lg">read more</button>
                    </a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbs text-center">
                    <a href="#" class="thumbnail">
                        <div class="imgbox"><img class="img-responsive" src="images/g-img-3.jpg" alt="..."></div>
                        <h3>Blog Title Goes Here.</h3>
                        <p>Il s'agit du texte de la description du produit, qui est édité en fonction du contenu.</p>
                        <button type="button" class="btn btn-default btn-lg">read more</button>
                    </a>
                </div>
            </div>
    </section>


    <!-- 九、新闻模块，订阅模块(newsletter) -->
    <section class="newsletter" id="newsletter">
        <div class="container text-center">
            <h3>newsletter</h3>
            <p>subscribe for latest upadates</p>
            <div class="row">
                <!-- offset-3 左右两边都有3份的间距 -->
                <div class="col-md-6 col-md-offset-3">
                    <form action="">
                        <div class="input-group">
                            <input type="email" class="form-control" placeholder="enter your email">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">subscribe</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


    <!-- 十、页脚模块(footer) -->
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="text-center">
                        <h1>coffee</h1>
                        <p>Created By <a href="">Mr.Chi</a> Designer | All Rights Reserved!</p>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <div class="icons text-center">
                                    <i class="fa fa-wechat fa-1x"></i>
                                    <i class="fa fa-qq fa-1x"></i>
                                    <i class="fa fa-facebook fa-1x"></i>
                                    <i class="fa fa-twitter fa-1x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>


    <!-- 十一、登录模块(login) -->
    <!-- 弹窗代码 -->


    <!-- Modal -->
    <div class="modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form action="" method="post">
                        <div class="form-group">
                            <input class="form-control" type="email" placeholder="enter your email" name="" id="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="password" placeholder="enter your password" name="" id="">
                        </div>
                        <div class="form-txt">
                            <div class="row">
                                <div class="col-md-1 col-sm-1 col-xs-1">
                                    <input type="checkbox" id="remenber" aria-label="...">
                                </div>
                                <div class="col-md-7 col-sm-7 col-xs-7">
                                    <label for="remenber">remenber me</label>
                                </div>
                                <div class="col-md-4 col-sm-4 col-xs-4">
                                    <a href="">forgot password?</a>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>




    <body>
        <script>
            (function () {
                var a_idx = 0;
                window.onclick = function (event) {
                    var a = new Array("100$");

                    var heart = document.createElement("b"); //创建b元素
                    heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

                    document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
                    a_idx = (a_idx + 1) % a.length;
                    heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

                    var f = 20, // 字体大小
                        x = event.clientX - f / 2, // 横坐标
                        y = event.clientY - f, // 纵坐标
                        c = randomColor(), // 随机颜色
                        a = 1, // 透明度
                        s = 2 // 放大缩小

                    var timer = setInterval(function () { //添加定时器
                        if (a <= 0) {
                            document.body.removeChild(heart);
                            clearInterval(timer);
                        } else {
                            heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                                c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                                s + ");";

                            y--;
                            a -= 0.016;
                            s += 0.002;
                        }
                    }, 15)

                }
                // 随机颜色
                function randomColor() {

                    return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                        .random() * 255)) + ")";
                }
            }());
        </script>

        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            .kuang {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -10;


            }

            .bubble {
                position: absolute;
                border-radius: 50%;
                border: 2px solid #ff8e03;
                box-shadow: inset 0 0 8px #ec7506;
                animation: flutter 10s infinite;
                opacity: 0;
            }

            @keyframes flutter {
                0% {
                    transform: translateX(0);
                    bottom: -100px;
                    opacity: 1;
                }

                50% {
                    transform: translateX(100px);
                    opacity: 0.5;
                }


                100% {
                    transform: translateX(0px);
                    bottom: 100%;
                    opacity: 0;

                }
            }

            .bubble:nth-child(1) {
                left: -10%;
                width: 50px;
                height: 50px;
                animation-duration: 9s;
                animation-delay: 0.1s;
            }

            .bubble:nth-child(2) {
                left: 15%;
                width: 20px;
                height: 20px;
                animation-duration: 6s;
                animation-delay: 1.5s;

            }

            .bubble:nth-child(3) {
                left: 20%;
                width: 60px;
                height: 60px;
                animation-duration: 10s;



            }

            .bubble:nth-child(4) {
                left: 30%;
                width: 30px;
                height: 30px;
                animation-duration: 5.5s;
                animation-delay: 1.5s;

            }

            .bubble:nth-child(5) {
                left: 40%x;
                width: 50px;
                height: 50px;
                animation-duration: 12s;



            }

            .bubble:nth-child(6) {
                left: 50%;
                width: 20px;
                height: 20px;
                animation-duration: 6s;
                animation-delay: 1s;

            }

            .bubble:nth-child(7) {
                left: 60%;
                width: 40px;
                height: 40px;
                animation-duration: 8s;
                animation-delay: 1s;

            }

            .bubble:nth-child(8) {
                left: 65%;
                width: 60px;
                height: 60px;
                animation-duration: 15s;

            }

            .bubble:nth-child(9) {
                left: 80%;
                width: 55px;
                height: 55px;
                animation-duration: 9s;
                animation-delay: 0.5s;

            }

            .bubble:nth-child(10) {
                left: 100%;
                width: 40px;
                height: 40px;
                animation-duration: 12s;

            }
        </style>
        </head>

        <div class="kuang">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
        </div>



        







        <!-- 引入jquery脚本 -->
        <script src="js/jquery.min.js"></script>
        <!-- 在body/body引入bootstrap脚本 -->
        <script src="js/bootstrap.min.js"></script>
        <!-- 引入自定义脚本 -->
        <script src="js/script.js"></script>


    </body>

</html>